<template>
  <div style="width: 100%;height: 100%;">
    <div  style="width: 100%;height: 100%;" ref="reportRef"></div>
  </div>
</template>
<script>
import {getWeekReportApi,getHourReportApi} from '../../../api/product/index.js'
// import moment from 'moment'
export default {
  props: {
    type: {
      type: String,
      default: 'week',
    },
  },
  data() {
    return {
      list:[]
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      const _that = this,
        api = this.type === 'week' ? getWeekReportApi : getHourReportApi
      api({pkCorp: 1002}).then(res => {
        const {code,data} = res
        if(code === 2000) {
          _that.list = data
          _that.type === 'week' ? _that.setWeekOption() : _that.setDayOption()
        }
      })
    },
    setWeekOption() {
      const _that = this
      const myChart = this.$echarts.init(this.$refs.reportRef),dateList = [],valueList = []
      _that.list.forEach(item => {
        dateList.push(item.day)
        valueList.push(item.value)
      })
      const option = {
        title: {
          text: '周产量波动',
          left:'50px',
          top: '10px',
          textStyle: {
            color: '#FFF'
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: dateList,
          axisLine: {
            show: true,
            lineStyle: {
              color: '#05358b',
            },
          },
          axisLabel: {
            formatter: '{value}',
            color: '#eee',
            fontSize: this.fitChartSize(14),
          },
        },
        yAxis: {
          type: 'value',
          splitLine: {
            show: false,
          },
          axisLabel: {
            formatter: '{value}',
            color: '#ccc',
            fontSize: this.fitChartSize(15),
          },
        },
        grid: {
          top: '15%',
          bottom: '10%',
          left: '10%',
          // right: '8%',
          // left: '10%',
        },
        series: [
          {
            data: valueList,
            type: 'line',
            label: {},
            areaStyle: {
              color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#7bfffc ' },
                { offset: 1, color: '#09f2ed' },
              ]),
            },
          },
        ],
      }
      myChart.setOption(option)
    },
    setDayOption() {
      const _that = this
      const myChart = this.$echarts.init(this.$refs.reportRef),hourList = [],valueList = []
      _that.list.forEach(item => {
        hourList.push(item.hour)
        valueList.push(item.value)
      })
      const option = {
        title: {
          text: '日产量波动',
          left:'50px',
          top: '10px',
          textStyle: {
            color: '#FFF'
          }
        },
        grid: {
          top: 20,
          left: '3%',
          right: '3%',
          bottom: '5px',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          data: hourList,
          axisLabel: {
            color: '#aaa',
            fontSize: 10,
            // formatter: function(val) {
            //   var strs = val.split('') //字符串数组
            //   var str = ''
            //   for (var i = 0, s; (s = strs[i++]); ) {
            //     //遍历字符串数组
            //     str += s
            //     if (!(i % 4)) str += '\n' //按需要求余
            //   }
            //   return str
            // },

            interval: 0,
            rotate: 30,
          },

          axisLine: {
            lineStyle: {
              color: '#05358b',
            },
          },
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} ',
            color: '#aaa',
            fontSize: 10,
          },

          // 图表区域横向的线
          splitLine: {
            show: false,
            lineStyle: {
              color: '#05358b',
            },
          },
        },
        series: [
          {
            data: valueList,
            type: 'bar',
            label: {
              show: true,
              color: '#fff',
              fontSize: 12,
              position: 'top',
            },
            itemStyle: {
              color: '#FF4A01'
            },
          },
        ],
      }
      myChart.setOption(option)
    }

  },
}

</script>
